<template>
    <div class="resource_display outer_shadows">
        <ul class="resource_display_list">
            <li v-for="(item,index) in resource.dataList" :key="index"
                :style="{'--delay': index*0.05+'s'}"
                @click="toDetail(item.id)">
                <img :src="item.cover" alt="" class="resource_display_img" v-show="item.cover">
                <div class="resource_display_content">
                    <p class="resource_display_title">{{item.title}}</p>
                    <p class="resource_display_body" v-html="item.content"></p>
                    <div class="resource_display_info">
                        <span>{{dayjs(item.time).format(base.timeFormat)}}</span>
                        <div style="display: flex">
                            <span class="resource_display_content_info"><img src="/public/img/detail/visit_content.png" title="浏览" alt="">{{format.n_format(item.visit)}}</span>
                            <span class="resource_display_content_info"><img src="/public/img/detail/support_content.png" title="点赞" alt="">{{format.n_format(item.support)}}</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<!--长方形盒子内容布局-->
<script setup>
import format from "@/config/methods/digital.js"
import dayjs from "dayjs";
import base from "@/config/constant/constant.js";
import router from "@/router/index.js";
//内容列表
 const resource = defineProps({
     dataList:Array,
 })

//跳转详情
const toDetail = (id)=>{
    window.open("#/articleDetails?id=" + id, '_blank');
    window.localStorage.setItem("Current_option","1000");
}
</script>

<style scoped>
.resource_display {
    width: 100%;
}

.resource_display_list li {
    display: flex;
    padding: 10px;
    height: 150px;
    margin:0 0 20px;
    cursor: pointer;
    animation: home_resource_content .2s ease-in-out 0s 1 forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes home_resource_content {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.resource_display_img {
    width: 160px;
    aspect-ratio: 16/9;
    margin-right: 10px;
}

.resource_display_content {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.resource_display_title{
    font-size: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    margin: 5px 0;
    min-height: 23px;
    transition: all .2s;
}

.resource_display_title:hover{
    text-decoration: underline;
    color: #6da6e1;
}

.resource_display_content .resource_display_body {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.resource_display_info span{
    font-size: 13px;
    margin: 0 5px;
}
.resource_display_info{
    width: 100%;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
}

.resource_display_content_info{
    display: flex;
    align-items: center;
}
.resource_display_content_info img{
    width: 15px;
}
</style>